<template>
    <div style="margin: 8px;">
        <el-skeleton animated :rows="8" :loading="data.isFisrt">
            <el-descriptions border column="4" direction="vertical">
                <template #extra>
                    <div v-if="!data.isEdit">
                        <el-button @click="event.edit" type="primary" round>编辑</el-button>
                    </div>
                    <div v-else>
                        <el-popconfirm @confirm="event.save" title="确认要保存吗？">
                            <template #reference>
                                <el-button type="primary" round>保存</el-button>
                            </template>
                        </el-popconfirm>
                    </div>
                </template>

                <el-descriptions-item label="产品图片*" :span="4">
                    <el-carousel :interval="4000" type="card" height="220px">
                        <el-carousel-item v-for="(image, index) in data.images" :key="index">
                            <img :src="image" :alt="image" style="width: 60%; height: 100%;" />
                        </el-carousel-item>
                    </el-carousel>
                </el-descriptions-item>
                <el-descriptions-item label="产品名称*" :span="2">

                    <template v-if="!data.isEdit">
                        <el-tag> {{ data.data.pname }}</el-tag>
                    </template>
                    <el-input v-else type="text" v-model="data.data.pname">
                    </el-input>

                </el-descriptions-item>
                <el-descriptions-item label="产品价格*" :span="2">

                    <template v-if="!data.isEdit">
                        <el-tag> ￥{{ data.data.pprice}}</el-tag>
                    </template>
                    <el-input-number v-else type="text" v-model="data.data.pprice">
                    </el-input-number>

                </el-descriptions-item>
                <el-descriptions-item label="产品库存*" :span="2">

                    <template v-if="!data.isEdit">
                        <el-tag> {{ data.data.pCount }}</el-tag>
                    </template>
                    <el-input-number v-else type="text" v-model="data.data.pCount">
                    </el-input-number>

                </el-descriptions-item>


                <el-descriptions-item label="产品序号*" :span="2">

                    <template v-if="!data.isEdit">
                        <el-tag> {{ data.data.pno }}</el-tag>
                    </template>
                    <el-input-number v-else type="text" v-model="data.data.pno">
                    </el-input-number>

                </el-descriptions-item>
        
                <el-descriptions-item label="服务时长(分钟)*" :span="2" v-if="data.data.ptype==1">
                    <template v-if="!data.isEdit">
                        <el-tag> {{ data.data.pDuration === 0 ? '无' : data.data.pDuration }}</el-tag>
                    </template>
                    <el-input-number v-else type="text" v-model="data.data.pDuration">
                    </el-input-number>
                </el-descriptions-item>

                <el-descriptions-item label="是否上架*" :span="1">

                    <el-switch :disabled="!data.isEdit" v-model="data.data.pislist"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-text="是"
                        inactive-text="否" :active-value="1" :inactive-value="0" />
                </el-descriptions-item>
                <el-descriptions-item label="是否置顶*" :span="3">
                    <el-switch :disabled="!data.isEdit" v-model="data.data.pIstop"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-text="是"
                        :active-value="1" :inactive-value="0" inactive-text="否" />
                </el-descriptions-item>
                <el-descriptions-item label="产品描述*" :span="3">
                    <template v-if="!data.isEdit">
                        <el-tag> {{ data.data.pexplain }}</el-tag>
                    </template>
                    <el-input v-else type="text" v-model="data.data.pexplain">
                    </el-input>
                </el-descriptions-item>
            </el-descriptions>
        </el-skeleton>
    </div>
</template>

<script setup lang="ts">
import { Get_Product, Update_Produc } from '@/api/product';
import type { pro_Dto } from '@/Dto/Request/product/pro';
import Api_Code from '@/Dto/Response/Api_code';
import router from '@/router';
import { closeloading, startloading } from '@/utils/loading';
import { msg } from '@/utils/msg';
import { el } from 'element-plus/es/locales.mjs';
import { onMounted, reactive } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();

const data = reactive<pro_Dto>({
    isFisrt: true,
    isEdit: false,
    images: [],
    data: []
})


const event = {
    edit() {
        data.isEdit = true
    },
   async save() {

        startloading()
        const res=await Update_Produc({
            pid:route.params.id,
            pname:data.data.pname,
            pprice:data.data.pprice,
            pCount:data.data.pCount,
            pno:data.data.pno,
            pDuration:data.data.pDuration,
            PIstop:data.data.pistop,
            pislist:data.data.pislist,
            pexplain:data.data.pexplain
        })
        if(res.code===Api_Code.ok){

            closeloading()
            msg(res)
            data.isEdit=false
        }else{
            msg(res)
        }

        
    }
}

const methods = {
    async bind() {
        data.isFisrt
        const res = await Get_Product({
            id: route.params.id.toString()
        })
        if (res.code === Api_Code.ok) {
            data.data = res.data
            res.data.pimg.forEach((d: any) => {
                data.images.push("http://localhost:5220/images/" + d)
            });
            data.isFisrt = false
          
        }
    }
}

onMounted(async () => {
    await methods.bind()
})
</script>

<style scoped>

</style>